<!DOCTYPE html>
<html lang="en" xmlns:templet="http://www.w3.org/1999/xhtml" xmlns:margin-left="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <style>
        .word {
            position: absolute;
            right: 10px;
            bottom: 10px;
            color: #aaa;
            font-size: 12px;
        }

        .unCheckedBox {
            width: 10px;
            height: 10px;
            margin-top: 3px;
            border: 2px solid #cccccc;
            background: white;
            float: left;
        }

        .checkedBox {
            width: 10px;
            height: 10px;
            margin-top: 3px;
            border: 2px solid #BDB76B;
            background: #BDB76B;
            float: left;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">腾飞健康</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item layui-this"><a href="">总检</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" name="goBackIndex">返回首页</a></li>
        </ul>
    </div>
    <div style="float:left; width: 27%; height: 550px;border-top: #dddddd solid 2px; border-bottom: #dddddd solid 2px">
        <div style="width: 100%; height: 50px; margin-bottom: 5px; border-bottom: #dddddd solid 2px">
            <div class="layui-row">
                <div class="layui-input-inline layui-col-sm8" style="padding-top: 5px;padding-left: 8%; width: 60%;">
                    <input class="layui-input " placeholder="体检编号..." autocomplete="off" name="searchBookRegisteInput"
                           id="searchBookRegisteInput" maxlength="18" lay-verify="number">
                </div>
                <div class="layui-input-inline layui-col-sm2" style="padding-top: 5px;">
                    <button class="layui-btn" lay-filter="search" id="search">查询</button>
                </div>
                <div class="layui-input-inline layui-col-sm2" style="padding-top: 5px;">
                    <button class="layui-btn layui-btn-primary" lay-filter="clear" id="clear">清空</button>
                </div>
            </div>

        </div>

        <form class="layui-form layui-form-pane">
            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="sex" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="age" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">婚姻状态</label>
                <div class="layui-input-block">
                    <input type="text" name="maritalStatus" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input type="text" name="userIdentity" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">挂号员</label>
                <div class="layui-input-block">
                    <input type="text" name="examinerName" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <div class="layui-form-item" style="height: 25px">
                <label class="layui-form-label">挂号日期</label>
                <div class="layui-input-block">
                    <input type="text" name="bookDate" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>
        </form>
    </div>

    <div style="float:left; width: 35%;height: 550px; border: #dddddd solid 2px; overflow-y:auto; overflow-x: hidden">
        <div style="width: 100%; height: 50px; margin-bottom: 5px; border-bottom: #dddddd solid 2px; text-align: center">
            <span style="line-height: 50px; font-size: 18px; padding-left: 5px; color: #555555">体检套餐：</span>
            <span style="line-height: 50px; font-size: 18px;">入职体检</span>
        </div>
        <div style="width: 100%;border-bottom: #dddddd solid 2px;">
            <div style="text-align: center;"><span style="text-align: center; font-size: 18px;color: #555555">体检详情</span>
            </div>
            <div class="layui-btn-container" style="margin-left: 20px;margin-top: 10px">
                <button class="layui-btn layui-btn-disabled" name="labExamineResult" disabled>实验室检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="radExamineResult" disabled>放射类检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="supExamineResult" disabled>超声类检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="speExamineResult" disabled>窥镜类检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="medExamineResult" disabled>医技类检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="cliExamineResult" disabled>临床类检查结果</button>
                <button class="layui-btn layui-btn-disabled" name="diseaseHistory" disabled>病史信息</button>
            </div>
        </div>

        <div style="width: 100%; height: auto; margin-bottom: 5px; border-bottom: #dddddd solid 2px;">
            <div style="text-align: center;margin-top: 5px"><span
                    style="text-align: center; font-size: 18px;color: #555555">体检进度</span></div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">实验室检查</legend>
            </fieldset>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>肝功能</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>肾功能</span></div>
                <div class="unCheckedBox"></div>
            </div>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>乙肝三系统</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>血常规</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="clear: both"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">放射类检查</legend>
            </fieldset>

            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>CT-头部</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>CT-颈部</span></div>
                <div class="unCheckedBox"></div>
            </div>

            <div style="clear: both"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">医技类检查</legend>
            </fieldset>

            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>心电图</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="clear: both"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">窥镜类检查</legend>
            </fieldset>

            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>普通肠镜-直肠</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="clear: both"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">超声类检查</legend>
            </fieldset>

            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>彩色多普勒超声诊断仪-腹部</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="clear: both"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 15px">临床类检查</legend>
            </fieldset>

            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>身高</span></div>
                <div class="checkedBox"></div>
            </div>
            <div style="width: 50%; height: 30px;background: lightcyan; float: left">
                <div style="float: left; width: auto; padding-left: 30px; padding-right: 10px"><span>体重</span></div>
                <div class="unCheckedBox"></div>
            </div>
            <div style="clear: both"></div>

            <div style="padding: 10px; width: 100%"></div>
        </div>

    </div>

    <div style="float: right; width: calc(100% - 4px - 62%); height: 550px;border-top: #dddddd solid 2px; border-bottom: #dddddd solid 2px; overflow-y:auto">
        <div style="width: 100%; height: calc(100% - 30% - 10% - 2px);">
            <form class="layui-form layui-form-pane" lay-filter="submitValue">
                <input type="text" hidden value="" name="bookRegisteId">
                <div class="layui-form-item layui-form-text"
                     style="padding-left: 10px; padding-right: 10px; padding-top: 10px">
                    <label class="layui-form-label">体检小结：</label>
                    <div class="layui-input-block">
                            <textarea name="briefSummary" placeholder="请输入内容" class="layui-textarea"
                                      style="position: relative"
                                      maxlength="500"
                                      onpropertychange="if(value.length>500) value=value.substr(0,500)"
                                      oninput="wordLeg(this);" lay-verify="required" disabled></textarea>
                        <div class="word">
                            <span class="text_count" name="briefSummary">0</span> / <span class="num_count"
                                                                                          id="numCount1">500</span>
                        </div>
                        <div style="margin-top: 20px"></div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text"
                     style="padding-right: 10px; padding-left: 10px; padding-top: 3px">
                    <label class="layui-form-label">诊断结果：</label>
                    <div class="layui-input-block">
                            <textarea name="diagnosis" placeholder="请输入内容" class="layui-textarea"
                                      style="position: relative"
                                      maxlength="500"
                                      onpropertychange="if(value.length>500) value=value.substr(0,500)"
                                      oninput="wordLeg(this);" lay-verify="required" disabled></textarea>
                        <div class="word">
                            <span class="text_count" name="diagnosis">0</span> / <span class="num_count" id="numCount2">500</span>
                        </div>
                        <div style="margin-top: 20px"></div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text"
                     style="padding-right: 10px; padding-left: 10px; padding-top: 3px">
                    <label class="layui-form-label">防治建议：</label>
                    <div class="layui-input-block">
                            <textarea name="proposal" placeholder="请输入内容" class="layui-textarea"
                                      style="position: relative"
                                      maxlength="500"
                                      onpropertychange="if(value.length>500) value=value.substr(0,500)"
                                      oninput="wordLeg(this);" lay-verify="required" disabled></textarea>
                        <div class="word">
                            <span class="text_count" name="proposal">0</span> / <span class="num_count" id="numCount3">500</span>
                        </div>
                        <div style="margin-top: 20px"></div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block" style="padding-left: 10%;padding-top: 3px">
                        <button type="submit" name="submit" class="layui-btn layui-btn-disabled" lay-submit=""
                                lay-filter="submitExamineValue"  disabled>立即提交
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script type="text/javascript" src="lib/layui/layui.js"></script>
<script>
    layui.use(['jquery', 'table', 'form'], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;

        let examineNumber=null;

        //清空按钮
        $("#clear").on("click", function () {
            $("#searchBookRegisteInput").val("");
            $("input[name=userName]").val("");
            $("input[name=userIdentity]").val("");
            $("input[name=maritalStatus]").val("");
            $("input[name=sex]").val("");
            $("input[name=age]").val("");
            $("input[name=examinerName]").val("");
            $("input[name=bookDate]").val("");
            $("textarea[name=briefSummary]").val("").attr("disabled", "disabled");
            $("textarea[name=diagnosis]").val("").attr("disabled", "disabled");
            $("textarea[name=proposal]").val("").attr("disabled", "disabled");
            $("button[name=submit]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=labExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=radExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=speExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=supExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=medExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=cliExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            $("button[name=diseaseHistory]").addClass("layui-btn-disabled").attr("disabled", "disabled");
            examineNumber=null;
            form.render();
        });

        $("#search").on("click", function () {
            let searchBookRegisteInput = $("#searchBookRegisteInput").val();
            $("input[name=bookRegisteId]").val(searchBookRegisteInput);

            var reg = /^(0|[1-9][0-9]*)$/;
            if (reg.test(searchBookRegisteInput)) {
                $.ajax({
                    url: "/getRegisteUserMsg",
                    dataType: "json",
                    data: "id=" + searchBookRegisteInput,
                    type: "post",
                    async: true,
                    success: function (responseData) {
                        if (responseData['code'] == 0) {
                            layer.msg("未找到预约或者挂号记录！", {
                                icon: 2,
                                time: 1500
                            });
                            $("input[name=userName]").val("");
                            $("input[name=userIdentity]").val("");
                            $("input[name=maritalStatus]").val("");
                            $("input[name=sex]").val("");
                            $("input[name=age]").val("");
                            $("input[name=examinerName]").val("");
                            $("input[name=bookDate]").val("");
                            $("textarea[name=briefSummary]").val("").attr("disabled", "disabled");
                            $("textarea[name=diagnosis]").val("").attr("disabled", "disabled");
                            $("textarea[name=proposal]").val("").attr("disabled", "disabled");
                            $("button[name=submit]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=labExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=radExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=speExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=supExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=medExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=cliExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                            $("button[name=diseaseHistory]").addClass("layui-btn-disabled").attr("disabled", "disabled");

                            form.render();
                        }else{
                            examineNumber=searchBookRegisteInput;
                            $("textarea[name=briefSummary]").val("").removeAttr("disabled");
                            $("textarea[name=diagnosis]").val("").removeAttr("disabled");
                            $("textarea[name=proposal]").val("").removeAttr("disabled");
                            $("button[name=submit]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=labExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=radExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=speExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=supExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=medExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=cliExamineResult]").removeClass("layui-btn-disabled").removeAttr("disabled");
                            $("button[name=diseaseHistory]").removeClass("layui-btn-disabled").removeAttr("disabled");


                            $("input[name=userName]").val(responseData['user'].userName);
                            $("input[name=userIdentity]").val(responseData['user'].userIdentity);
                            if (responseData['user'].maritalStatus) {
                                $("input[name=maritalStatus]").val("未婚");
                            } else {
                                $("input[name=maritalStatus]").val("已婚");
                            }
                            if ((responseData['user'].userIdentity.substring(16, 17)) % 2 != 0) {
                                $("input[name=sex]").val("男");
                            } else {
                                $("input[name=sex]").val("女");
                            }
                            $("input[name=age]").val((new Date().getFullYear()) - (responseData['user'].userIdentity.substring(6, 10)));
                            $("input[name=examinerName]").val(responseData['examiner'].examinerName);
                            $("input[name=bookDate]").val(responseData['bookRegiste'].bookDate);

                            form.render();
                        }
                    },
                    error: function () {
                        examineNumber=null;
                        console.log("获取挂号信息请求失败！");
                        layer.msg("服务器错误！", {
                            icon: 2,
                            time: 1500
                        });
                    }
                });
            } else {
                layer.msg("输入错误！", {
                    icon: 2,
                    time: 1500
                });
                examineNumber=null;
                $("input[name=userName]").val("");
                $("input[name=userIdentity]").val("");
                $("input[name=maritalStatus]").val("");
                $("input[name=sex]").val("");
                $("input[name=age]").val("");
                $("input[name=examinerName]").val("");
                $("input[name=bookDate]").val("");
                $("button[name=submit]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("textarea[name=briefSummary]").val("").attr("disabled");
                $("textarea[name=diagnosis]").val("").attr("disabled");
                $("textarea[name=proposal]").val("").attr("disabled");
                $("button[name=labExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=radExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=speExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=supExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=medExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=cliExamineResult]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                $("button[name=diseaseHistory]").addClass("layui-btn-disabled").attr("disabled", "disabled");
                form.render();
            }
        });


        //返回首页index.html
        $("a[name=goBackIndex]").on("click", function () {
            window.open("/unitIndex", "_top");
        });

        //备注输入框字数显示
        window.wordLeg = function (obj) {
            var currleg = $(obj).val().length;
            var length = $(obj).attr('maxlength');
            if (currleg >= length) {
                layer.msg('字数请在' + length + '字以内');
            } else {
                $('span[name=' + obj.name + ']').text(currleg);
            }
        }

        $("button[name=labExamineResult]").on("click", function(){
            layer.open({
                title: "实验室检查结果",
                type: 2,
                maxmin: true,                //最大化最小化
                shade: 0.5,
                anim: 0,                     //弹出动画
                area: ["80%", "80%"],
                content: "/labExamineResult?examineNumber="+examineNumber,
                zIndex: layer.zIndex,
                success: null,
                end: function () {
                },
            });
        });

        form.on("submit(submitExamineValue)", function (data) {
            console.log(data.field);
            $.ajax({
                url: "/submitTotalExamineResult",
                dataType: "json",
                data: data.field,
                type: "post",
                async: true,
                success: function (responseResult) {
                    if (responseResult.code == 1) {
                        layer.msg("检查结果写入成功！", {
                            icon: 1,
                            time: 1500,
                        });
                    } else {
                        layer.msg("检查结果写入失败！", {
                            icon: 2,
                            time: 1500,
                        });
                    }
                },
                error: function () {
                    layer.msg("服务器错误！", {
                        icon: 2,
                        time: 1500,
                    });
                }
            });
            return false;
        });

    });
</script>
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        {{# if(!d.filledStatus){ }}
        <span class="layui-btn layui-btn-default layui-btn-xs" lay-event="examine"
              style="padding-right: 5px;margin-right: 5px">检查</span>
        {{# } }}
        {{# if(d.filledStatus){ }}
        <span class="layui-btn layui-btn-default layui-btn-xs layui-btn-disabled" disabled="disabled"
              style="padding-right: 5px;margin-right: 5px">检查</span>
        {{# } }}
    </div>
</script>
<script type="text/html" id="filledStatusTple">
    {{# if(!d.filledStatus){ }}
    <span style="color: red">未检查</span>
    {{# } }}
    {{#　if(d.filledStatus){ }}
    <span style="color: green">已检查</span>
    {{# } }}
</script>
</body>
</html>